<template>
	<view>
		<view class="page">
			<view class="bus_info-wrap">
				<view class="top-dack"></view>
				<view class="bus_info tp-w690">
					<view class="info_top-wrap">
						<view class="date">发车时间：{{busInfo.fontDay || ''}} {{busInfo.week || ''}}</view>
						<!-- <view class="price">
						￥
						<text style="font-size: 34rpx;">28</text>
						<text style="font-size: 24rpx;">折扣</text>
					</view> -->
					</view>
					<view class="info_content-wrap">
						<view class="from">
							<text class="time">{{busInfo.startTime}}</text>
							<text class="address ellispsis2">{{startStation || busInfo.startStation}}</text>
						</view>
						<view class="bus_type-wrap">
							<text class="but_type">{{busInfo.shiftsCartype}}</text>
							<view class="dack"></view>
							<text class="duration">历时{{busInfo.travelTime || ''}}分钟</text>
						</view>
						<view class="to">
							<text class="time">{{busInfo.arriveTime}}</text>
							<text class="address ellispsis2">{{endStation || busInfo.arriveStation}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 乘车人信息S -->
			<view class="content-wrap tp-w690">
				<view class="rider_info-wrap">
					<view class="common_tit-wrap">
						<view class="l-wrap">乘车人信息</view>
						<view class="r-wrap"></view>
					</view>
					<!-- 历史记录S -->
					<!-- <view class="rider_list_history">
						<view class="rider_item_history" v-for="(it_r_h,in_r_h) in riderPersionListHistory" :key="in_r_h" @click="handleChooseHistoryRider(it_r_h)">{{it_r_h.name}}</view>
					</view> -->
					<!-- 历史记录E -->
					<!-- 当前选择乘车人列表S -->
					<view class="rider_list">
						<view class="rider_item">
							<view class="l-wrap">
								<!-- <uni-icons type="trash" size="22" color="#ccc" @click="handleDelRider(it_r)"></uni-icons> -->
								<text class="name ellispsis1">{{riderPersionInfo.name}}</text>
								<text class="type">{{riderPersionInfo.typeName || ''}}</text>
								<text class="ID">{{riderPersionInfo.IdCard}}</text>
							</view>
							<!-- <uni-icons @click="handleGoBusAddRider(it_r)" type="arrowright" size="22" color="#ccc"></uni-icons> -->
						</view>
					</view>
					<!-- 当前选择乘车人列表E -->
				</view>
			</view>
			<!-- 乘车人信息E -->

			<!-- 意向司机S -->
			<view class="common-wrap tp-w690">
				<view class="input-wrap">
					<view class="type">意向司机</view>
					<view class="input" @click="handleGoDriverList">
						<input type="text" disabled :value="ticketInfo.driver" placeholder="请选择" />
						<!-- <uni-icons type="arrowright" size="20" color="#999"></uni-icons> -->
					</view>
				</view>
			</view>
			<!-- 意向司机E -->


			<view class="common-wrap tp-w690">
				<view class="input-wrap">
					<view class="type">联系手机</view>
					<view class="input">
						<input type="number" v-model="ticketInfo.phone" placeholder="用于接收取票信息" />
					</view>
				</view>
			</view>

			<view v-if="goIsCheckSeat == 0" class="common-wrap tp-w690">
				<view class="input-wrap">
					<view class="type">选座服务</view>
					<view class="input" @click="handleGoSeatList">
						<input type="text" disabled :value="choosedSeatListStr" placeholder="请选择座位" />
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 购买保险 S -->
			<view class="common-wrap tp-w690">
				<view class="input-wrap" v-for="(it_i, in_i) in insuranceList" :key="in_i">
					<view class="l-wrap">
						<view>购买保险<text class="terms" @click="handleGoInsuranceDetail(it_i)">《{{it_i}}》</text></view>
					</view>
					<!-- <view class="price">￥{{it_i.price}}</view> -->
				</view>
				<view class="input-wrap" v-for="(it_s, in_s) in serversList" :key="in_s">
					<view class="l-wrap">
						<view>{{it_s}}</view>
					</view>
					<!-- <view class="price">￥{{it_s.price}}</view> -->
				</view>
			</view>
			<!-- 购买保险 E -->

			<view class="submit-btn flex flex_end">
				<view class="price-wrap">
					<text>差价：</text>
					<text class="price">￥{{price || 0}}</text>
				</view>

				<view class="r-wrap">
					<view class="btn" @click="SubmitHint">提交订单</view>
				</view>
			</view>
		</view>

		<!-- 多不退，少补 -->
		<uni-popup ref="modalBox" :maskClick="false" type="center">
			<view class="modal_box-wrap">
				<view class="alert-icon">
					<image src="../../static/imgs/icons/tabbar/home1-icon.png" mode=""></image>
				</view>
				<view class="tp-pt30 tp-pb30">
					<view class="p">高价班次改签低价班次不退还差价</view>
					<view class="p">低价班次改签高价班次需补齐差价</view>
				</view>

				<view class="btns-wrap">
					<view class="btn cancel" @click="hide">取消</view>
					<view class="btn confirm" @click="handleConfirm">确定</view>
				</view>
				<uni-icons @click="hide" class="close-icon" type="close" size="30" color="#999"></uni-icons>
			</view>
		</uni-popup>

		<!-- <CommonPay ref="commonPay" :price="price" :orderInfo="busInfo" @payMoney="payMoney" @wechatPaySuccess="wechatPaySuccess"></CommonPay> -->
		<keyBoard ref="keyBoard" @pay="payMoney" @closeK="closeK"></keyBoard>

	</view>
</template>

<script>
	import keyBoard from '@/components/common/common-keyBoard.vue'
	import CommonPay from '@/components/common/common-pay.vue'
	export default {
		components: {
			CommonPay,
			keyBoard
		},
		data() {
			return {
				busInfo: {},
				phone: '', // 手机
				ticketId: '', // 车票id
				ticketInfo: {}, // 改签详情信息集合
				choosedSeatList: [], // 当前所选座位列表
				riderPersionInfo: {}, // 本车票乘车人
				insuranceList: [], //保险列表
				serversList: [], //服务列表

				goIsCheckSeat: '0', // 去程可选座, 0.可 1.不可
				price: 0, // 需支付的价格
			};
		},
		onLoad(opt) {
			this.ticketId = opt && opt.ticketId
			this.busInfo = opt && opt.busInfo && JSON.parse(opt.busInfo)
			console.log(this.busInfo);
			this.$store.commit('delSeatList')
			this.$store.commit('delRiderList')
			this.gaiQianDetail()
			this.getServiceList() // 订单页面保险,服务等列表展示 
		},
		computed: {
			choosedSeatListStr() {
				let str = ''
				if (this.choosedSeatList.length) {
					str = this.choosedSeatList.join('、') + '座'
				}
				return str
			},
			startStation() {
				let str = this.busInfo.startStation && this.busInfo.startStation.split('-')[1]
				return str
			},
			endStation() {
				let str = this.busInfo.arriveStation && this.busInfo.arriveStation.split('-')[1]
				return str
			},
		},
		onShow() {
			this.getChoosedSeatList()
			this.gaiqianMoney()
		},
		methods: {
			// 获取改签详情
			gaiQianDetail() {
				this.$http.get(this.$api.gaiQianDetail, {
					ticketId: this.ticketId
				}).then(res => {
					if (res.code === 200) {
						this.ticketInfo = res.data
						this.riderPersionInfo = res.data.passenger
						this.insuranceList = res.data.insurance
						this.serversList = res.data.servers
						this.$store.commit('upRiderList', this.ticketInfo.passenger)
					}
				})
			},
			// 计算改签要支付的价格
			gaiqianMoney() {
				this.$http.get(this.$api.gaiQianPrice, {
					ticketId: this.ticketId,
					shiftsId: this.busInfo.shiftsId
				}).then(res => {
					if (res.code === 200) {
						this.price = res.data.price
					}
				})
			},
			// 关闭 输入框
			closeK() {
				this.$refs.keyBoard.hide()
			},
			// 支付成功
			payMoney(pwd) {
				const _this = this
				const {
					shiftsId,
					schedulingId,
					shiftsCartype
				} = this.busInfo
				let seat = _this.choosedSeatList.join()
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['qV-zTPOxaKQPkn0_V78sW0-86_5ZCgCllCMRFfwRwkc'],
					success(res) {
						// #endif
						_this.$http.post(_this.$api.gaiqinaPay, {
							ticketId: _this.ticketId,
							shiftsId,
							schedulingId,
							seat,
							phone: _this.ticketInfo.phone,
							shiftsCartype,
							payWord: pwd
						}).then(res => {
							if (res.code === 200) { // 密码正确，支付成功
								// this.$refs.commonPay.closeKeyBoard()
								_this.$refs.keyBoard.hide()
								uni.showToast({
									title: '支付成功'
								})
								uni.reLaunch({
									url: './success.order?id=' + res.data.orderNo + '&type=bus&toAndFor=false'
								});
							} else if (res.code == 2012) {
								// uni.navigateTo({
								// 	url: '/pagesUser/editPayPwd?type=0'
								// });
							}
						})
						// #ifdef MP-WEIXIN
					},
				})
				// #endif

			},
			// 弹出提示
			SubmitHint() {
				if (this.choosedSeatList.length == 0 && this.goIsCheckSeat == 0) {
					return uni.showToast({
						title: `请选择乘车座位`,
						icon: 'none'
					})
				}
				this.$refs.modalBox.open()
			},
			// 差价提示 提示隐藏
			hide() {
				this.$refs.modalBox.close()
			},
			// 差价提示 提交订单
			handleConfirm() {
				this.handleSubmitOrder()
			},
			// 提交订单 弹出选择支付方式
			handleSubmitOrder() {
				const _this = this

				if (this.price - 0 > 0) {
					// this.$refs.commonPay.show()
					this.$refs.keyBoard.show()
				} else {
					const {
						shiftsId,
						schedulingId,
						shiftsCartype
					} = this.busInfo
					let seat = this.choosedSeatList.join()
					// #ifdef MP-WEIXIN
					uni.requestSubscribeMessage({
						tmplIds: ['qV-zTPOxaKQPkn0_V78sW0-86_5ZCgCllCMRFfwRwkc'],
						success(res) {
							 _this.submitWxNotifyConfirm('qV-zTPOxaKQPkn0_V78sW0-86_5ZCgCllCMRFfwRwkc',res['qV-zTPOxaKQPkn0_V78sW0-86_5ZCgCllCMRFfwRwkc'])
					// #endif
					_this.$http.post(_this.$api.gaiQian, {
						ticketId: _this.ticketId,
						shiftsId,
						schedulingId,
						seat: seat,
						phone: _this.ticketInfo.phone,
						shiftsCartype
					}).then(res => {
						if (res.code == 200) {

							uni.showToast({
								title: '改签成功'
							})
							uni.reLaunch({
								url: './success.order?id=' + res.data.orderNo + '&type=bus&toAndFor=false'
							});
						}
					})
					// #ifdef MP-WEIXIN
						},
					})
					// #endif
				}

			},
			// 获取所选座位
			getChoosedSeatList() {
				this.choosedSeatList = this.$store.getters.getSeatList
			},
			// 跳转到保险详情
			handleGoInsuranceDetail(item, type) {
				return
				let obj = {
					type: 1,
					id: item.id,
					title: item.name || item.title
				}
				if (type) {
					obj.type = type
				}
				uni.navigateTo({
					url: '/pagesTravel/serviceDetail?info=' + JSON.stringify(obj),
				});
			},
			// 去选座位
			handleGoSeatList() {
				let obj = {
					schedulingId: this.busInfo.schedulingId,
					lineId: this.busInfo.lineId
				}
				uni.navigateTo({
					url: '../../pagesTravel/seatList?choosedSeatList=' + JSON.stringify(this.choosedSeatList) + '&busInfo=' + JSON.stringify(
						obj)
				});
			},
			// 获取订单页面保险,服务等列表展示
			getServiceList() {
				this.$http.get(this.$api.getServiceList + '?goId=' + this.busInfo.schedulingId).then(res => {
					if (res.code === 200) {
						this.goIsCheckSeat = res.data.goIsCheckSeat
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 270rpx;

		/deep/.input-placeholder {
			font-size: 30rpx;
			font-weight: normal;
			color: #ccc;
		}
	}

	.bus_info-wrap {
		height: 250rpx;
		background: #f5f5f5;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 9;

		.top-dack {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 90rpx;
			background-color: $blue;
			z-index: -1;
		}

		.bus_info {
			position: absolute;
			top: 20rpx;
			left: 0;
			right: 0;
			height: 250rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 40rpx;
			box-sizing: border-box;
			z-index: 9;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.info_top-wrap {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				justify-content: space-between;

				.price {
					font-size: 24rpx;
					color: $red;
					padding-right: 44rpx;
				}
			}

			.info_content-wrap {
				display: flex;
				flex: 1;
				justify-content: space-between;
				padding-top: 20rpx;

				.from,
				.to {
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					line-height: 1;

					.time {
						font-size: 48rpx;
						font-weight: bold;
					}

					.address {
						font-size: 32rpx;
						line-height: 42rpx;
						width: 202rpx;
					}
				}

				.to {
					text-align: right;
				}

				.bus_type-wrap {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666;

					.dack {
						width: 170rpx;
						background-color: #ccc;
						height: 6rpx;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							width: 35rpx;
							height: 6rpx;
							top: -11rpx;
							right: -7rpx;
							background-color: #ccc;
							transform: rotate(45deg);
						}
					}
				}
			}
		}
	}

	.content-wrap {
		margin-top: 20rpx;

		.rider_info-wrap {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 30rpx 40rpx;
			box-sizing: border-box;

			.common_tit-wrap {
				box-sizing: border-box;

				.l-wrap {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.rider_list_history {
				display: flex;
				flex-wrap: wrap;

				.rider_item_history {
					padding: 19rpx 24rpx;
					border-radius: 8rpx;
					border: 1px solid #ebebeb;
					font-size: 28rpx;
					margin-right: 20rpx;
					margin-top: 26rpx;
				}
			}

			.rider_list {
				.rider_item {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// border-bottom: 1px solid #ebebeb;

					.l-wrap {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.name {
							font-size: 30rpx;
							padding: 0 10rpx 0 20rpx;
							width: 116rpx;
						}

						.type {
							padding-right: 40rpx;
						}
					}
				}
			}



		}
	}

	.common-wrap {
		border-radius: 12rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.input-wrap {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ebebeb;
			font-size: 30rpx;

			&:last-child {
				border: none;
			}

			.l-wrap {
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					height: 30rpx;
					width: 30rpx;
					margin-right: 20rpx;
				}

				.terms {
					// color: $blue;
				}
			}

			.ul_service {
				display: flex;

				.li_service {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					margin-left: 80rpx;

					.txt {
						margin-left: 20rpx;
					}
				}
			}

			.type {
				font-size: 30rpx;
			}

			.input {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				display: flex;

				input {
					padding-right: 6rpx;
				}
			}
		}
	}

	.submit-btn {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		background-color: #fff;
		height: 98rpx;
		font-size: 26rpx;
		color: #666;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;

		.price-wrap {
			flex: 1;
			display: flex;
			align-items: center;

			.price {
				color: $red;
				font-size: 36rpx;
				margin-left: 24rpx;
			}
		}

		.r-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;



			.arrow-icon {
				margin: 0 40rpx 0 16rpx;
			}

			.btn {
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: $yellow;
				border-radius: 12rpx;
				color: #fff;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}

	.modal_box-wrap {
		background-color: #fff;
		width: 582rpx;
		border-radius: 20rpx;
		padding: 80rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		position: relative;

		.alert-icon {
			width: 136rpx;
			height: 76rpx;
		}

		.p {
			// padding: 40rpx 0 60rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 50rpx;
		}

		.btns-wrap {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 218rpx;
				height: 73rpx;
				line-height: 73rpx;
				text-align: center;
				border-radius: 37px;
				font-size: 28rpx;

				&.cancel {
					border: 1px solid #ccc;
					color: #ccc;
				}

				&.confirm {
					background-color: $blue;
					color: #fff;
				}
			}
		}

		.close-icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 2;
		}
	}
</style>
